<template>
  <view
    id="hiddenBlock"
    class="px-16 pb-32 container"
    :style="{ backgroundColor, position: 'absolute' }"
  >
    <view :style="{ opacity: isOpacity ? 1 : 0, transition: '.3s' }">
      <view class="title-color fz-12 mb-8">
        <text>报名时间：</text>
      </view>
      <view class="fz-12 mb-12">
        <text>{{ purchaseTimeDes }}</text>
      </view>
      <view class="title-color fz-12 mb-8">
        <text>取消报名说明：</text>
      </view>
      <view class="fz-12 mb-12">
        <text>{{ refundTimeDes }}</text>
      </view>
      <view v-if="reviewStatus === ReviewStatusEnum.NEED_REVIEW || introduction" class="title-color fz-12 mb-8">
        <text>报名说明：</text>
      </view>
      <view class="fz-12 mb-8">
        <view v-if="reviewStatus === ReviewStatusEnum.NEED_REVIEW" class="mb-4 disFlxAC">
          <text class="ali-icon">&#xec1e;</text>
          <text>此报名类型需要活动举办方审核后才可报名成功。</text>
        </view>
        <view v-if="introduction" class="disFlx">
          <text class="ali-icon">&#xec1e;</text>
          <text>
            {{ introduction }}
          </text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { ReviewStatusEnum } from '@/enums/activityStatusEnum';
import { propTypes } from '@/utils/propTypes';
  import { getCurrentInstance, type PropType } from 'vue';

  const ins: any = getCurrentInstance();

  defineProps({
    height: propTypes.number.def(0),
    isOpacity: propTypes.bool.def(false),
    backgroundColor: propTypes.string,
    /** 购票时间 */
    purchaseTimeDes: propTypes.string,
    /** 退票说明 */
    refundTimeDes: propTypes.string,
    /** 票种描述 */
    introduction: propTypes.string,
    /** 审核状态 */
    reviewStatus: Number as PropType<ReviewStatusEnum>,
  });

  const emits = defineEmits(['update:height']);

  function getHiddenBlockHeight() {
    // #ifndef H5
    const query = uni.createSelectorQuery().in(ins.proxy);
    query
      .select('#hiddenBlock')
      .boundingClientRect((res) => {
        const { height } = res as UniApp.NodeInfo;
        emits('update:height', (height || 300) - uni.upx2px(40));
      })
      .exec();
    // #endif
  }

  setTimeout(getHiddenBlockHeight, 100);
</script>

<style lang="scss" scoped>
  .title-color {
    color: #fff;
  }
  .container {
    color: #bed6ff;
    width: 100%;
    box-sizing: border-box;
  }
</style>
